<template>
  <view class="px-4 bg-#fff" @click="onItemClick">
    <!--干货item(多张图)-->
    <view v-if="data.slideshow && data.slideshow.length > 1" class="pt-3">
      <view class="c-#333 text-28 text-maxline-2 font-semibold">{{ data.title || '' }}</view>
      <view class="grid grid-cols-3 gap-2 mt-1">
        <u-image v-for="(item, index) in data.slideshow" :key="index" :src="item" width="216" height="144"
          border-radius="10" />
      </view>
      <view class="flex mt-1.5 pb-3">
        <view class="flex-1 pr-2 c-#b5b5b5 text-26 text-maxline-1">来源：{{ data.source || '' }}</view>
        <view class="flex-shrink-0 c-#b5b5b5 text-24">
          <text>{{ data.read_num || 0 }}人阅读</text>
          <text class="mx-2">|</text>
          <text>{{ data.createtime || '' }}</text>
        </view>
      </view>
    </view>
    <!--干货item（单张图）-->
    <view v-else class="flex py-3">
      <view class="flex-1 flex flex-col justify-between overflow-hidden pr-3">
        <view class="c-#333 text-28 text-maxline-2 font-semibold">{{ data.title || '' }}</view>
        <view class="flex">
          <view class="flex-1 c-#b5b5b5 text-26 text-single pr-2">来源：{{ data.source || '' }}</view>
          <view class="flex-shrink-0 c-#b5b5b5 text-24">
            <text>{{ data.read_num || 0 }}人阅读</text>
            <text class="mx-2">|</text>
            <text>{{ data.createtime || '' }}</text>
          </view>
        </view>
      </view>
      <u-image v-if="data.cover_image" class="flex-shrink-0" :src="data.cover_image" width="180" height="120"
        border-radius="10" />
    </view>
    <u-line />
  </view>
</template>
<script setup>
import { navigate } from '@/common/util/uni';
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const props = defineProps({
  data: Object,
})

function onItemClick() {
  if (!userStore.isLogin) {
    navigate('/package_user/pages/common/login')
    return
  }
  navigate(`/package_square/pages/article/detail?id=${props.data.id}`)
}
</script>
<style scoped></style>
